<template>
  <view class="choose-popup" v-if="showPopup">
    <view class="mask-layer" @click="close"></view>
    <view class="choose-popup-wrap">
      <view class="cpw-title">
        <p>菜谱详情</p>
        <span @click="close">X</span>
      </view>
      <view class="cpw-content">
        <view
          class="cpw-content-item"
          v-for="item in popupList"
          :key="item.id"
        >
          <view class="item-time">
            <view class="item-time-week">
              <span></span>
              <p>{{ item.send_at }}</p>
            </view>
            <p class="item-time-price">￥{{ item.order_amount }}</p>
          </view>
          <view class="item-detail" v-if="item.goods && item.goods.length">
            <p>商品</p>
            <view
              class="item-detail-goods"
              v-for="goods in item.goods"
              :key="goods.goods_spu_id"
            >
              <view class="idg-content">
                <span>{{ goods.goods_name }}</span>
                <span>{{ goods.num }}{{ goods.unit }}</span>
                <span>￥{{ goods.order_amount }}</span>
              </view>
            </view>
          </view>
          <view class="item-detail" v-if="item.package_goods && item.package_goods.length">
            <view class="item-detail-package" v-for="packageGoods in item.package_goods" :key="packageGoods.package_goods_id">
              <p>{{ packageGoods.name }}/套餐</p>
              <template v-if="packageGoods.package_goods && packageGoods.package_goods.length">
                <view
                  class="item-detail-goods"
                  v-for="goods in packageGoods.package_goods"
                  :key="goods.goods_spu_id"
                >
                  <view class="idg-content">
                    <span>{{ goods.goods_name }}</span>
                    <span>{{ goods.num }}{{ goods.unit }}</span>
                    <span>￥{{ goods.order_amount }}</span>
                  </view>
                </view>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    popupList: {
      type: Array,
      default: () => []
    },
    showPopup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
};
</script>
<style lang="scss" scoped>
.choose-popup {
  position: fixed;
  top: 120px;
  left: 30rpx;
  z-index: 5;
  // top: calc(var(--status-bar-height) + 0);
  .mask-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 100px 30rpx 0;
    z-index: 6;
  }
  .choose-popup-wrap {
    width: 690rpx;
    padding: 20rpx 0 48rpx;
    background: #ffffff;
    border-radius: 10rpx;
    position: relative;
    z-index: 7;
    .cpw-title {
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      p {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        flex: 1;
        text-align: center;
      }
      span {
        font-size: 36rpx;
      }
    }
    .cpw-content {
      margin-top: 20rpx;
      min-height: 400rpx;
      max-height: 800rpx;
      overflow-y: auto;
      .cpw-content-item {
        .item-time {
          height: 48rpx;
          line-height: 48rpx;
          background: rgba(0, 0, 0, 0.05);
          padding: 0 70rpx 0 30rpx;
          display: flex;
          justify-content: space-between;
          .item-time-week {
            display: flex;
            align-items: center;
          }
          span {
            display: inline-block;
            width: 4rpx;
            height: 28rpx;
            background: #40ae36;
            margin-right: 22rpx;
          }
          .item-time-price {
            font-weight: bold;
            font-size: 30rpx;
            color: rgba(243, 45, 45, 0.95);
          }
        }
      }
    }
    .item-detail {
      padding: 0 70rpx 0 55rpx;
      p {
        font-weight: bold;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.95);
        margin: 20rpx 0;
      }
      span {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.85);
      }
      .idg-content {
        display: flex;
        margin-bottom: 20rpx;
        span:first-child {
          width: 50%;
        }
        span:nth-child(2) {
          width: 20%;
          padding-right: 10%;
          text-align: right;
        }
        span:last-child {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}
</style>